<template>
  <main-layout>
    <div class="products-page">
      <div class="banner">
        <div class="container">
          <h1>精选花艺</h1>
          <p>为您的特殊时刻增添一抹芬芳</p>
        </div>
      </div>

      <div class="container">
        <div class="products-content">
          <!-- 筛选区 -->
          <aside class="filter-section">
            <div class="filter-box">
              <div class="categories">
                <h3>商品分类</h3>
                <ul>
                  <li
                    v-for="category in categories"
                    :key="category.id"
                    :class="{ active: selectedCategory === category.id }"
                    @click="selectCategory(category.id)"
                  >
                    {{ category.name }}
                    <span>({{ category.count }})</span>
                  </li>
                </ul>
              </div>

              <div class="price-range">
                <h3>价格区间</h3>
                <div class="range-inputs">
                  <input
                    type="number"
                    v-model="priceRange.min"
                    placeholder="最低价"
                  />
                  <span>-</span>
                  <input
                    type="number"
                    v-model="priceRange.max"
                    placeholder="最高价"
                  />
                  <button @click="applyPriceFilter">确定</button>
                </div>
              </div>

              <div class="tags">
                <h3>商品标签</h3>
                <div class="tag-list">
                  <span
                    v-for="tag in tags"
                    :key="tag"
                    :class="{ active: selectedTags.includes(tag) }"
                    @click="toggleTag(tag)"
                    class="tag"
                  >
                    {{ tag }}
                  </span>
                </div>
              </div>
            </div>
          </aside>

          <!-- 商品列表 -->
          <div class="products-main">
            <div class="products-header">
              <div class="total-count">
                共找到 <span>{{ filteredProducts.length }}</span> 个商品
              </div>
              <div class="sort-options">
                <span>排序：</span>
                <button
                  :class="{ active: sortBy === 'default' }"
                  @click="sortBy = 'default'"
                >
                  默认
                </button>
                <button
                  :class="{ active: sortBy === 'price-asc' }"
                  @click="sortBy = 'price-asc'"
                >
                  价格从低到高
                </button>
                <button
                  :class="{ active: sortBy === 'price-desc' }"
                  @click="sortBy = 'price-desc'"
                >
                  价格从高到低
                </button>
                <button
                  :class="{ active: sortBy === 'sales' }"
                  @click="sortBy = 'sales'"
                >
                  销量优先
                </button>
              </div>
            </div>

            <div class="products-grid">
              <product-card
                v-for="product in paginatedProducts"
                :key="product.id"
                :product="product"
              />
            </div>

            <!-- 分页 -->
            <div class="pagination">
              <button
                class="page-btn"
                :disabled="currentPage === 1"
                @click="currentPage--"
              >
                <i class="fas fa-chevron-left"></i>
              </button>
              <button
                v-for="page in totalPages"
                :key="page"
                :class="['page-btn', { active: currentPage === page }]"
                @click="currentPage = page"
              >
                {{ page }}
              </button>
              <button
                class="page-btn"
                :disabled="currentPage === totalPages"
                @click="currentPage++"
              >
                <i class="fas fa-chevron-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main-layout>
</template>

<script>
import MainLayout from "@/components/layouts/MainLayout.vue";
import ProductCard from "@/components/ProductCard.vue";

export default {
  name: "ProductsView",
  components: {
    MainLayout,
    ProductCard,
  },
  data() {
    return {
      selectedCategory: null,
      priceRange: { min: "", max: "" },
      sortBy: "default",
      currentPage: 1,
      selectedTags: [],
      itemsPerPage: 12,
      categories: [
        { id: 1, name: "玫瑰花束", count: 24 },
        { id: 2, name: "永生花", count: 18 },
        { id: 3, name: "混合花束", count: 15 },
        { id: 4, name: "礼盒花", count: 12 },
        { id: 5, name: "商务花篮", count: 8 },
      ],
      tags: ["热销", "新品", "特惠", "节日", "婚礼", "生日", "纪念日", "表白"],
    };
  },
  computed: {
    filteredProducts() {
      let result = [...this.$store.state.flowers];
      // 分类筛选
      if (this.selectedCategory) {
        result = result.filter((p) => p.categoryId === this.selectedCategory);
      }

      // 价格筛选
      if (this.priceRange.min) {
        result = result.filter((p) => p.price >= Number(this.priceRange.min));
      }
      if (this.priceRange.max) {
        result = result.filter((p) => p.price <= Number(this.priceRange.max));
      }

      // 标签筛选
      if (this.selectedTags.length > 0) {
        result = result.filter((p) =>
          p.tags.some((tag) => this.selectedTags.includes(tag))
        );
      }

      // 排序
      switch (this.sortBy) {
        case "price-asc":
          result.sort((a, b) => a.price - b.price);
          break;
        case "price-desc":
          result.sort((a, b) => b.price - a.price);
          break;
        case "sales":
          result.sort((a, b) => b.sales - a.sales);
          break;
      }

      return result;
    },
    totalPages() {
      return Math.ceil(this.filteredProducts.length / this.itemsPerPage);
    },
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredProducts.slice(start, end);
    },
  },
  mounted() {
    this.$store.dispatch("fetchFlowers");
    const category = this.$route.query.category;
    if (category) {
      this.selectedCategory = this.categories.find(
        (c) => c.name === category
      )?.id;
    }
  },
  methods: {
    selectCategory(categoryId) {
      this.selectedCategory = categoryId;
      this.currentPage = 1;
    },
    applyPriceFilter() {
      this.currentPage = 1;
    },
    toggleTag(tag) {
      const index = this.selectedTags.indexOf(tag);
      if (index === -1) {
        this.selectedTags.push(tag);
      } else {
        this.selectedTags.splice(index, 1);
      }
      this.currentPage = 1;
    },
  },
};
</script>

<style scoped>
.products-page {
  background: #f8f9fa;
  min-height: 100vh;
}

.banner {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("https://giftflowers.com.hk/media/wysiwyg/giftflowers/home/banner-category.jpg");
  background-size: cover;
  background-position: center;
  height: 200px;
  display: flex;
  align-items: center;
  color: white;
  text-align: center;
  margin-bottom: 40px;
}

.banner h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.products-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.filter-box {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-box h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.categories ul {
  list-style: none;
  padding: 0;
}

.categories li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  color: #666;
  transition: all 0.3s;
}

.categories li:hover {
  color: #ff6b6b;
}

.categories li.active {
  color: #ff6b6b;
  font-weight: bold;
}

.range-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
}

.range-inputs input {
  width: 80px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.range-inputs button {
  padding: 8px 15px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  padding: 6px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tag:hover {
  background: #ff6b6b;
  color: white;
}

.tag.active {
  background: #ff6b6b;
  color: white;
}

.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.total-count span {
  color: #ff6b6b;
  font-weight: bold;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-options button {
  padding: 6px 12px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.sort-options button:hover {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.sort-options button.active {
  background: #ff6b6b;
  color: white;
  border-color: #ff6b6b;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.page-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled) {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.page-btn.active {
  background: #ff6b6b;
  color: white;
  border-color: #ff6b6b;
}

.page-btn:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
}

@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .products-content {
    grid-template-columns: 1fr;
  }

  .filter-box {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .products-header {
    flex-direction: column;
    gap: 15px;
  }

  .sort-options {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style> 